<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button:first').click(function () {
                var targElement = $('div.test');
                var width = targElement.width();
                var height = targElement.height();
                var show_result = '(不含边距边框)<br>宽：' + width + '<br>高：' + height;
                targElement.html(show_result);
            });
            $('button:eq(1)').click(function () {
                var targElement = $('div.test');
                var width = targElement.innerWidth();
                var height = targElement.innerHeight();
                var show_result = '(只包含内边距)<br>宽：' + width + '<br>高：' + height;
                targElement.html(show_result);
            });

            $('button:eq(2)').click(function () {
                var targElement = $('div.test');
                var width = targElement.outerWidth();
                var height = targElement.outerHeight();
                var show_result = '(只包含内边距和边框)<br>宽：' + width + '<br>高：' + height;
                targElement.html(show_result);
            });
            $('button:eq(3)').click(function () {
                var targElement = $('div.test');
                var width = targElement.outerWidth('true');
                var height = targElement.outerHeight('true');
                var show_result = '(包含内边距外边距和边框)<br>宽：' + width + '<br>高：' + height;
                targElement.html(show_result);
            });
        });
    </script>
    <style>
        .test {
            width: 400px;
            height: 200px;
            border: 3px solid yellowgreen;
            background-color: blue;
            padding: 4px;
            margin: 10px;
            color: pink;
        }
    </style>
</head>
<div>
    <ul>
        <li>width()</li>
        <li>height()</li>
        <li>innerWidth()</li>
        <li>innerHeight()</li>
        <li>outerWidth()</li>
        <li> outerHeight()</li>
    </ul>
    <div class="test"></div>
    <button>元素的宽和高（不包含边距边框）</button>
    <button>元素的宽和高（包含内边距padding）</button>
    <button>元素的宽和高（包含内边距padding和边框border）</button>
    <!--<button>元素的宽和高（包含内边距padding外边距margin和边框border）</button> !-->
</div>

</html>